<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  <title>啦啦网</title>

<style type="text/css">
#foor a {
  margin-left: 30%!important;
  margin-right: 30%!important;
  font-size: 15px!important;
 }
 #foor{
   margin-top: 10%;
 }
 #messageList{
   width: 100%;
   height: 18rem!important;
 }
  </style>
</head>
<body>
  <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
  <div>
      <div  id="messageList" class="weui-cells">
        <div id="message" class="weui-cell">
        </div>
      </div>
    <div id="foor">
      <a href="javascript:;" id="talk_btn" class=" weui-btn weui-btn_primary">开始录音</a>
      <!-- <a href="javascript:;" id="btn" class="weui-btn weui-btn_warn">结束录音</a> -->
      <a href="javascript:;" id="tryListen" onclick='tryListen()' class="weui-btn weui-btn_disabled weui-btn_default">试听</a>
      <a href="javascript:;" onclick='trans()' class="weui-btn weui-btn_disabled weui-btn_default">转换文字</a>
    </div>
  </div>
</body>
<script>
  var code=0
$(document).ready(function(){ 
  $.get('/getJsSdk',(res)=>{ 
    code=res.code
    if(res.code===200){
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'wxa97639ce5ff70793', // 必填，公众号的唯一标识
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.noncestr, // 必填，生成签名的随机串
        signature: res.data.signature,// 必填，签名
        jsApiList: [  'checkJsApi','startRecord', 'stopRecord','translateVoice','scanQRCode', 'onVoiceRecordEnd', 'uploadVoice', 'downloadVoice', 'playVoice', 'pauseVoice', 'onVoicePlayEnd','stopVoice'] // 必填，需要使用的JS接口列表
});
wx.ready(function(res){
 console.log(res)
 // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

wx.error(function(res){
 // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

});
    }else{
      console.log(code)
      $.toptip('暂无权限，稍后重试！',1000*60*60, 'error');
    }
    
  })
})
//假设全局变量已经在外部定义
//按下开始录音
var voice = {localId:''}
var timer = null;
var count = 0
$('#talk_btn').on('touchstart', function(event){
if(code===200){
  $("#talk_btn").text("录音中....");
    event.preventDefault();
    START = new Date().getTime();
    count=0;
    let reckon = 10
    $.toptip('录音中.......', 'success');
    timer = setInterval(function() {
                    count++;
                    if(60-count==reckon&&!reckon<1){
                      reckon--;
                      $.toast(`录音还剩${reckon}秒`,1000*reckon, "text");
                      if(reckon===1){
                        timeout()
                      }
                    }
                }, 1000)
    recordTimer = setTimeout(function(){
        wx.startRecord({
            success: function(res){
                localStorage.rainAllowRecord = 'true';
            },
            cancel: function () {
                alert('用户拒绝授权录音');
            }
        });
    },300);
}else{
  $.toast("禁止操作", "forbidden");
}
});

function timeout() {
  wx.onVoiceRecordEnd({
      // 录音时间超过一分钟没有停止的时候会执行 complete 回调
        complete: function (res) {
          $("#talk_btn").text("开始录音");
          voice.localId = res.localId;
      }
});
}
//松手结束录音
  $('#talk_btn').on('touchend', function(event){
    event.preventDefault();
    clearInterval(timer)
    END = new Date().getTime();
    $("#talk_btn").text("开始录音");
    if((END - START) < 300){
        END = 0;
        START = 0;
        //小于300ms，不录音
        clearTimeout(recordTimer);
    }else{
        wx.stopRecord({
          success: function (res) {
            voice.localId = res.localId;
            // uploadVoice();
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
    }
});
//上传录音
// function uploadVoice(){
//     //调用微信的上传录音接口把本地录音先上传到微信的服务器
//     //不过，微信只保留3天，而我们需要长期保存，我们需要把资源从微信服务器下载到自己的服务器
//     wx.uploadVoice({
//         localId: voice.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
//         isShowProgressTips: 1, // 默认为1，显示进度提示
//         success: function (res) {
//             //把录音在微信服务器上的id（res.serverId）发送到自己的服务器供下载。
//             // $.ajax({
//             //     url: '后端处理上传录音的接口',
//             //     type: 'post',
//             //     data: JSON.stringify(res),
//             //     dataType: "json",
//             //     success: function (data) {
//             //         alert('文件已经保存到七牛的服务器');//这回，我使用七牛存储
//             //     },
//             //     error: function (xhr, errorType, error) {
//             //         console.log(error);
//             //     }
//             // });
//         }
//     });
// }
var Istatus = false
 // 试听
function tryListen() {
  if(Istatus){
    $("#tryListen").text("试听");
    clearInterval(timer)
    Istatus=false
    wx.stopVoice({
  localId: voice.localId // 需要停止的音频的本地ID，由stopRecord接口获得
  });
  }else{
    Istatus = true
    $("#tryListen").text("播放中.....");
    let reciprocal=count;
    let normal = 1
    timer = setInterval(function() {
          if(reciprocal<6){
            normal=0
            $.toast(`${reciprocal}`,reciprocal*1000, "text");
          }
          reciprocal--;
          }, 1000)
  wx.playVoice({
  localId: voice.localId // 需要播放的音频的本地ID，由stopRecord接口获得
 })
 wx.onVoicePlayEnd({ // 监听播放结束
   success: function (res) {
   }
 });
 setTimeout(()=>{
  clearInterval(timer)
  $("#tryListen").text("试听");
 },1000*count)
  }
}
// 试听停止
function tryStop() {
 wx.pauseVoice({
  localId:voice.localId  // 需要停止的音频的本地ID，由stopRecord接口获得
 })
}

function trans(){
  wx.translateVoice({
  localId: voice.localId, // 需要识别的音频的本地Id，由录音相关接口获得
  isShowProgressTips: 1, // 默认为1，显示进度提示
  success: function (res) {
    $('#message').append(`<div>${res.translateResult}</div>`)
  }
});
}
//注册微信播放录音结束事件【一定要放在wx.ready函数内】
wx.onVoicePlayEnd({
    success: function (res) {
        stopWave();
    }
});
</script>
</html>